<!doctype html>
<html lang="en" data-theme="Balzac">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Balzac HTML Template</title>

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

        <!-- theme -->
        <link id="theme-css" rel="stylesheet" href="css/theme.css">
        <!--[if IE 9]><link rel="stylesheet" href="css/ie9.css"><![endif]-->

    </head>

    <body>

        <div class="bh-header" data-uk-sticky="{top:-1}">
            <div class="bh-navbar">

                <a class="bh-logo uk-visible-large" href="frontpage.html"><div class="uk-navbar-brand"><span class="uk-text-primary">Bal</span>zac</div></a>

                <a class="bh-logo-small uk-hidden-large" href="frontpage.html"><div class="uk-navbar-brand"><span class="uk-text-primary">Bal</span>zac</div></a>

                <!-- img use like this -->
                <!-- <a class="bh-logo" href="frontpage.html">
                    <img class="uk-responsive-height" src="" width="" height="">
                </a> -->

                <nav class="uk-navbar uk-text-center">
                    <div class="bh-navbar-nav-wrapper uk-visible-large">
                        <ul class="uk-navbar-nav">
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="frontpage.html" class="uk-active">Home</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li class="uk-nav-header">Styles</li>
                                        <li>
                                            <a href="?style=default">Light</a>
                                        </li>
                                        <li>
                                            <a href="?style=dark">Dark</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="#">Pages</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="pages-about.html">About Us</a>
                                        </li>
                                        <li>
                                            <a href="pages-team.html">Team</a>
                                        </li>
                                        <li>
                                            <a href="pages-service.html">Service</a>
                                        </li>
                                        <li>
                                            <a href="pages-portfolio.html">Portfolio</a>
                                        </li>
                                        <li>
                                            <a href="pages-contact.html">Contact</a>
                                        </li>
                                        <li>
                                            <a href="pages-faq.html">FAQ</a>
                                        </li>
                                        <li>
                                            <a href="pages-error.html">Error</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="shop.html">Shop</a>
                                <div class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-3">
                                    <div class="uk-grid uk-dropdown-grid">
                                        <div class="uk-width-medium-1-3">
                                            <ul class="uk-nav uk-nav-navbar">
                                                <li class="uk-nav-header">Layouts</li>
                                                <li>
                                                    <a href="shop-singleproduct.html">Single Product</a>
                                                </li>
                                                <li>
                                                    <a href="shop-cart.html">Cart</a>
                                                </li>
                                                <li>
                                                    <a href="shop-checkout.html">Checkout</a>
                                                </li>
                                                <li>
                                                    <a href="shop-wishlist.html">Wishlist</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="uk-width-medium-2-3">
                                            <div class="uk-panel">
                                                <div class="uk-panel-badge uk-badge uk-badge-danger">Only now - $99</div>
                                                <a href="shop-singleproduct.html"><img src="http://placehold.it/400x300&text=demo" width="400" height="300" alt="Product Image"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="#">Features</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="features-columns.html">Columns</a>
                                        </li>
                                        <li>
                                            <a href="features-positions.html">Positions</a>
                                        </li>
                                        <li>
                                            <a href="features-uikit-elements.html">UIkit Elements</a>
                                        </li>
                                        <li>
                                            <a href="features-theme-elements.html">Theme Elements</a>
                                        </li>
                                        <li>
                                            <a href="features-typography.html">Typhography</a>
                                        </li>
                                        <li>
                                            <a href="features-icons.html">Icons</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="blog.html">Blog</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="blog-singlepost.html">Single Post</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <a href="#offcanvas" class="uk-navbar-toggle uk-hidden-large" data-uk-offcanvas></a>

                </nav>

                <div class="bh-toolbar-left uk-visible-large">
                    <a class="bh-search-toggle" href="#" data-uk-toggle="{target:'.bh-search-bar', animation: 'uk-animation-slide-top'}"><i class="uk-icon-search"></i></a>
                </div>

                <div class="bh-toolbar-right">
                    <div class="uk-panel">
                        <ul class="uk-subnav uk-subnav-line">
                            <li>
                                <a href="#offcanvas-cart" data-uk-offcanvas><i class="uk-icon-shopping-cart uk-margin-small-right uk-hidden-small"></i> $209.80 <span class="uk-badge uk-badge-danger uk-badge-notification uk-margin-small-left">2</span></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="shop-wishlist.html"><i class=" uk-icon-heart"></i></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="#login" data-uk-modal><i class=" uk-icon-user"></i></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="#"><i class="uk-icon-power-off"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="bh-search-bar uk-hidden">
                <form class="uk-search" data-uk-search>
                    <input class="uk-search-field" type="search" placeholder="Search...">
                </form>
                <a href="#" class="uk-close" data-uk-toggle="{target:'.bh-search-bar'}"></a>
            </div>
        </div>

<div class="bh-position-title">
    <div class="uk-container uk-container-center">
        <div class="uk-panel">
            <h1 class="uk-margin-remove">Single Post Title</h1>
            <p class="uk-text-muted bh-text-uppercase uk-margin-remove">Qui animated corpse, cricket bat max brucks</p>
        </div>
    </div>
</div>

<div class="bh-position bh-position-default bh-isblog">
    <div class="uk-container uk-container-center">

        <ul class="uk-breadcrumb">
            <li><a href="frontpage.html">Home</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li class="uk-active"><span>Single Post</span></li>
        </ul>

        <article class="uk-article">
            <img class="bh-article-image" src="http://placehold.it/1200x500&text=demo" width="1200" height="500" alt="Article Image">
            <div class="bh-article-date">Jun 16</div>

            <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h2>Lorem ipsum dolor</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien sed aliquam ullamcorper. Fusce magna dolor, aliquam nec quam vel, lacinia rhoncus odio. Nulla facilisi. Donec laoreet diam eget nisi cursus laoreet. Suspendisse et commodo metus. Donec porttitor ut velit sit amet aliquam. Etiam diam enim, auctor eu ante quis, tincidunt fermentum nisi. Pellentesque scelerisque accumsan tortor

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien sed aliquam ullamcorper. Fusce magna dolor, aliquam nec quam vel, lacinia rhoncus odio. Nulla facilisi. Donec laoreet diam eget nisi cursus laoreet. Suspendisse et commodo metus. Donec porttitor ut velit sit amet aliquam. Etiam diam enim, auctor eu ante quis, tincidunt fermentum nisi. Pellentesque scelerisque accumsan tortor.
            </p>

            <div class="uk-article-meta">
                <ul>
                    <li>By <a href="#">Admin</a></li>
                    <li><a href="#blog-single-comments" data-uk-smooth-scroll="{offset: 20}">3 Comments</a></li>
                    <li>Categories: <a href="blog-singlepost.html">Webdesign</a><a href="blog-singlepost.html">, Themes</a></li>
                </ul>
            </div>

            <div class="uk-panel uk-panel-box uk-margin-top">
                <img src="http://placehold.it/100x100&text=demo" width="100" height="100" class="uk-align-left uk-margin-bottom-remove" alt="Author Image">
                <h4 class="uk-margin-remove">Brian Laurel</h4>
                <span class="uk-text-small uk-text-muted">Copywrither and Designer</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien sed aliquam ullamcorper.</p>
            </div>

            <h2 id="blog-single-comments">Comments</h2>

            <ul class="uk-comment-list">
                <li>
                    <div class="uk-comment">
                        <header class="uk-comment-header">
                            <img class="uk-comment-avatar" src="http://placehold.it/50x50&text=demo" width="50" height="50" alt="User Image">
                            <h4 class="uk-comment-title">Sarah Miller</h4>
                            <div class="uk-comment-meta">12 days ago | <a href="#">Profile</a></div>
                        </header>
                        <div class="uk-comment-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien sed aliquam ullamcorper. Fusce magna dolor, aliquam nec
                        </div>
                    </div>
                    <ul>
                        <li>
                            <div class="uk-comment uk-comment-primary">
                                <header class="uk-comment-header">
                                    <img class="uk-comment-avatar" src="http://placehold.it/50x50&text=demo" width="50" height="50" alt="User Image">
                                    <h4 class="uk-comment-title">Natalia Stone</h4>
                                    <div class="uk-comment-meta">12 days ago | <a href="#">Profile</a></div>
                                </header>
                                <div class="uk-comment-body">Quisque at justo in magna sollicitudin laoreet et quis augue. Sed gravida est dolor, eu mattis odio facilisis at. Donec porta id libero non semper. Nunc sed lobortis nibh. Pellentesque pellentesque consequat libero. Etiam ut mi a mauris cursus tempor sit amet eu est. </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="uk-comment">
                        <header class="uk-comment-header">
                            <img class="uk-comment-avatar" src="http://placehold.it/50x50&text=demo" width="50" height="50" alt="User Image">
                            <h4 class="uk-comment-title">John Parker</h4>
                            <div class="uk-comment-meta">15 days ago | <a href="#">Profile</a></div>
                        </header>
                        <div class="uk-comment-body">Cras aliquam ipsum sit amet ante accumsan, et fringilla leo venenatis. Vivamus eget nisi ut magna imperdiet sodales non sit amet urna. Nullam rhoncus nisi id risus laoreet, id posuere purus venenatis. Cras ullamcorper imperdiet rhoncus.</div>
                    </div>
                </li>
            </ul>

            <h3>Write a comment</h3>
            <form class="uk-form uk-form-stacked">
                <div class="uk-grid" data-uk-margin="{cls:'uk-margin-top'}">
                    <div class="uk-width-medium-1-2">
                        <label class="uk-form-label" for="form-singleproduct-name">Name</label>
                        <input type="text" placeholder="Enter your first name..." id="form-singleproduct-name" class="uk-width-1-1 uk-form-large">
                    </div>
                    <div class="uk-width-medium-1-2">
                        <label class="uk-form-label" for="form-singleproduct-mail">E-Mail</label>
                        <input type="text" placeholder="E-Mail address" id="form-singleproduct-mail" class="uk-width-1-1 uk-form-large">
                    </div>
                    <div class="uk-width-1-1">
                        <label class="uk-form-label" for="form-singleproduct-review">Message</label>
                        <textarea rows="6" placeholder="Enter you message..." id="form-singleproduct-review" class="uk-width-1-1 uk-form-large"></textarea>
                    </div>
                    <div class="uk-width-1-1">
                        <button class="uk-button bh-button">Submit</button>
                    </div>
                </div>
            </form>
        </article>

    </div>
</div>
            <footer class="bh-footer uk-text-center-small">
                <div class="uk-container uk-container-center uk-position-relative">
                    <a href="frontpage.html"><img src="http://placehold.it/60x60&text=demo" class="uk-margin-right" alt="Footer Logo" width="60" height="60" data-demo-style></a>
                    <span class="uk-hidden-small">
                        Copyright &copy; 2015 <a href="http://www.bahemian.com" target="_blank">Bahemian</a>. Built with so, so much love <i class="uk-icon-heart uk-text-primary uk-margin-small-left"></i>
                    </span>
                    <a class="bh-topscroller" data-uk-smooth-scroll href="#"><i class="uk-icon-angle-up"></i></a>
                </div>
            </footer>

            <div id="offcanvas" class="uk-offcanvas">
                <div class="uk-offcanvas-bar">
                    <form class="uk-search">
                        <input class="uk-search-field" type="search" placeholder="Search...">
                    </form>
                    <ul class="uk-nav uk-nav-offcanvas">
                        <li class="uk-parent">
                            <a href="frontpage.html">Home</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="?style=default">Light</a>
                                </li>
                                <li>
                                    <a href="?style=dark">Dark</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="#">Pages</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="pages-about.html">About us</a>
                                </li>
                                <li>
                                    <a href="pages-team.html">Team</a>
                                </li>
                                <li>
                                    <a href="pages-service.html">Service</a>
                                </li>
                                <li>
                                    <a href="pages-portfolio.html">Portfolio</a>
                                </li>
                                <li>
                                    <a href="pages-contact.html">Contact</a>
                                </li>
                                <li>
                                    <a href="pages-error.html">Error</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="shop.html">Shop</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="shop-singleproduct.html">Single Product</a>
                                </li>
                                <li>
                                    <a href="shop-cart.html">Cart</a>
                                </li>
                                <li>
                                    <a href="shop-checkout.html">Checkout</a>
                                </li>
                                <li>
                                    <a href="shop-wishlist.html">Wishlist</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="features.html">Features</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="features-columns.html">Columns</a>
                                </li>
                                <li>
                                    <a href="features-uikit-elements.html">UIkit Elements</a>
                                </li>
                                <li>
                                    <a href="features-theme-elements.html">Theme Elements</a>
                                </li>
                                <li>
                                    <a href="features-typography.html">Typhography</a>
                                </li>
                                <li>
                                    <a href="features-icons.html">Icons</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="blog.html">Blog</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="blog-singlepost.html">Single Post</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="offcanvas-cart" class="uk-offcanvas bh-offcanvas-light">
                <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
                    <div class="uk-panel">
                        <h3 class="bh-headline-bottom-border uk-margin-remove"><span>Cart</span></h3>
                        <table class="bh-offcanvas-shopping-cart uk-table uk-table-middle uk-margin-small-top uk-margin-bottom-remove">
                            <tbody>
                                <tr>
                                    <td>
                                        <a href="shop-singleproduct.html">
                                            <img src="http://placehold.it/100x75&text=demo" width="100" height="75" alt="Product Image">
                                        </a>
                                    </td>
                                    <td>
                                        <a class="bh-text-uppercase" href="shop-singleproduct.html">Workboots</a><br>
                                        $119.90
                                    </td>
                                    <td class="uk-text-center"><a href="#"><i class="uk-icon-times"></i></a></td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="shop-singleproduct.html">
                                            <img src="http://placehold.it/100x75&text=demo" width="100" height="75" alt="Product Image">
                                        </a>
                                    </td>
                                    <td>
                                        <a class="bh-text-uppercase" href="shop-singleproduct.html">Wayfarer Glasses</a><br>
                                        $89.90
                                    </td>
                                    <td class="uk-text-center"><a href="#"><i class="uk-icon-times"></i></a></td>
                                </tr>
                            </tbody>
                        </table>
                        <a href="shop-cart.html" class="uk-button uk-width-1-1">View Cart</a>
                        <a href="shop-checkout.html" class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-top">Go to Checkout</a>
                    </div>
                </div>
            </div>

            <div id="login" class="uk-modal">
                <div class="uk-modal-dialog">
                    <a class="uk-modal-close uk-close"></a>

                    <ul class="uk-tab uk-tab-grid" data-uk-tab="{connect:'#login-tab'}">
                        <li class="uk-width-small-1-2 uk-active"><a href="#">Login</a></li>
                        <li class="uk-width-small-1-2"><a href="#">Register</a></li>
                    </ul>

                    <ul id="login-tab" class="uk-switcher uk-margin">
                        <li class="uk-active">
                            <form class="uk-form">
                                <div class="uk-grid" data-uk-margin="{cls:'uk-margin-top'}">
                                    <div class="uk-width-1-1 uk-text-center">
                                        <h3>I'm already a member</h3>
                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr<br> sed diam nonumy eirmod tempor invidunt.</p>
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Username" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Password" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <label><input type="checkbox"> Remember me</label>
                                        <a class="uk-margin-left" href="#">Lost Password?</a>
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <button class="uk-button uk-text-center">Login</button>
                                    </div>
                                </div>
                            </form>
                        </li>
                        <li>
                            <form class="uk-form">
                                <div class="uk-grid" data-uk-margin="{cls:'uk-margin-top'}">
                                    <div class="uk-width-1-1 uk-text-center">
                                        <h3>I'm new here</h3>
                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr<br> sed diam nonumy eirmod tempor invidunt.</p>
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Username" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Password" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <button class="uk-button uk-text-center">Register</button>
                                    </div>
                                </div>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- vendor scripts -->
            <script src="assets/jquery.js"></script>
            <script src="assets/jquery.velocity.min.js"></script>
            <script src="assets/uikit/js/uikit.js"></script>
            <script src="assets/holder.js"></script>
            <script src="assets/countUp.js"></script>
            <script src="assets/uikit/js/components/accordion.min.js"></script>
            <script src="assets/uikit/js/components/grid.min.js"></script>
            <script src="assets/uikit/js/components/lightbox.min.js"></script>
            <script src="assets/uikit/js/components/search.min.js"></script>
            <script src="assets/uikit/js/components/slideshow.min.js"></script>
            <script src="assets/uikit/js/components/slideshow-fx.min.js"></script>
            <script src="assets/uikit/js/components/sticky.min.js"></script>
            <script src="assets/uikit/js/components/slider.min.js"></script>

            <!-- theme scripts -->
            <script src="js/theme.js"></script>

            <!-- demo related script - remove it!  -->
            <script src="demo.js"></script>
    </body>
</html>
